<!-- 内容列表组件 -->
<template>
  <div class="content-list">
    <p class="list-wu" v-if="list.length == 0">
      <span>无任何内容</span>
    </p>
    <transition-group v-if="list.length != 0" name="list" tag="ul">
      <li class="list-item" v-for="item in list" :key="item.id" @contextmenu.prevent="contentItemRightClick(item)">
        <p :style="item.isComplete ? 'text-decoration:line-through' : ''" class="list-item-content">{{ item.title }}</p>
        <my-line style="margin-top: 20px;" :type="lineType" lineHeight="1px"></my-line>
      </li>
    </transition-group>
  </div>
</template>

<script>
import MyLine from '../myline/MyLine.vue';
export default {
  name: '',
  props: {
    list: {
      type: Array,
      defalut() {
        return [];
      },
    },
    lineType: {
      type: String,
      default: 'solid',
    },
  },
  data() {
    return {};
  },
  components: { MyLine },
  methods: {
    contentItemRightClick(item) {
      this.$emit('contentItemRightClick', item);
    },
  },
};
</script>

<style scoped>
.content-list {
  height: 100%;
  user-select: text;
  overflow: auto;
}
.content-list ul {
  list-style: none;
}
.list-item {
  padding-top: 20px;
}
.list-item:hover {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}
.list-item-content::before {
  content: '·';
  font-weight: 700;
  margin-left: -12px;
}
.list-item-content {
  padding-left: 12px;
  line-height: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.list-wu {
  text-align: center;
  margin: 0 auto;
  margin-top: 50%;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.4s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
